<template>
  <view>
    <view v-if="Previewimg && !ScreenOrientation" class="vertical-mask">
      <!-- <view class="imgindex">
        <text> {{imgindex+1}}/{{images.length}} </text>
      </view> -->
      <view class="btn-vertical ">
        <image class="inco-vertical" src="/static/image/down-b.png" mode="aspectFit" @click="download"></image>
        <!-- <image class="inco-vertical" src="/static/image/v-to-l.png" mode="aspectFit" @click="toggleScreen"></image>
        <image class="inco-vertical" src="/static/image/small.png" mode="aspectFit" @click="orange"></image> -->
        <image class="inco-vertical" src="/static/image/close-b.png" mode="aspectFit" @click="close"></image>
      </view>
      <movable-area class="marea" scale-area v-if="movable">
        <movable-view class="mview" direction="all" :scale="scaled" @scale="onScale" scale-min="1" scale-max="5"
          :scale-value="scale">
          <view @touchstart="touchstart" @touchend="touchend">
            <view class="image-preview">
              <image :src="currentImageUrl" class="image-vertical " mode="aspectFit">
              </image>
            </view>
          </view>
        </movable-view>
      </movable-area>
    </view>

    <view v-if="Previewimg && ScreenOrientation" class="transverse-mask">
      <view class="imgindex-transverse" v-if="ButtonShow">
        <text>{{imgindex+1}}/{{images.length}}</text>
      </view>
      <view class="btn-transverse" v-if="ButtonShow">
        <image class="inco-transverse" src="/static/image/down-w.png" mode="aspectFit" @click="download"></image>
        <image class="inco-transverse" src="/static/image/l-to-v.png" mode="aspectFit" @click="toggleScreen"></image>
        <image class="inco-transverse" src="/static/image/play-w.png" mode="aspectFit" @click="playimg"></image>
        <image class="inco-transverse" src="/static/image/close-w.png" mode="aspectFit" @click="close"></image>
      </view>
      <view @touchstart="touchstart" @touchend="touchend">
        <view class="image-preview" @click="closebtn">
          <image :src="currentImageUrl" class="image-transverse">
          </image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'img-preview',
    props: {
      images: {
        type: Array,
        default: () => []
      },
      Previewimg: {
        type: Boolean,
        default: false,
        required: true
      },
      currentIndex: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        touchStartY: '',
        imgindex: '',
        intervalId: null,
        ScreenOrientation: false,
        ButtonShow: true,
        movable: true,
        scale: 1,
        old: {
          scale: 1
        },
        scaled: true,
        changeimg: true,
      };
    },
    created() {
      this.imgindex = this.currentIndex;
    },
    computed: {
      currentImageUrl() {
        return this.images[this.imgindex]
      }
    },
    methods: {
      download() {
		  const link = document.createElement('a');
		    link.href = this.currentImageUrl;
		    link.download = 'downloaded_image'; // 你可以指定下载的文件名
		    link.click();
		  
		    // 提示用户下载完成
		    uni.showToast({
		      title: '图片已开始下载',
		      icon: 'none',
		      duration: 2000
		    });
        // uni.saveImageToPhotosAlbum({
        //   filePath: this.currentImageUrl,
        //   success: function() {
        //     uni.showToast({
        //       title: '图片保存到相册成功',
        //       icon: 'none',
        //       duration: 2000
        //     });
        //   }
        // });
      },
      playimg() {
        this.ButtonShow = false;
        const images = this.images;
        let imgindex = this.imgindex;
        if (this.intervalId) {
          clearInterval(this.intervalId);
        }
        // 设置新的定时器
        this.intervalId = setInterval(() => {
          if (imgindex < images.length - 1) {
            imgindex++;
          } else {
            imgindex = 0;
          }
          this.imgindex = imgindex;
        }, 1350);
      },
      stopimg() {
        // 清除定时器
        if (this.intervalId) {
          clearInterval(this.intervalId);
          this.intervalId = null; // 重置 intervalId
        }
      },
      closebtn() {
        this.stopimg();
        this.ButtonShow = !this.ButtonShow
      },
      toggleScreen() {
        this.ScreenOrientation = !this.ScreenOrientation
      },
      onScale(e) {
        this.old.scale = e.detail.scale;
      },
      orange() {
        this.movable = false
        setTimeout(() => {
          this.scale = 1;
          this.old.scale = 1;
          this.movable = true;
        }, 30);
      },
      close() {
        this.$emit("quitPreview");
      },
      loadimg() {
        if (this.imgindex < this.images.length - 1) {
          this.imgindex++;
        } else {
          uni.showToast({
            title: '最后一张了',
            icon: 'none',
            duration: 2000
          });
        }
      },
      backimg() {
        if (this.imgindex > 0) {
          this.imgindex--; // 向后加载上一张图片
        } else {
          // 如果是第一张图片，则可以不显示任何提示，或者显示一个提示
          uni.showToast({
            title: '已经是第一张了',
            icon: 'none',
            duration: 2000
          });
        }
      },
      touchstart(e) {
        if (e.touches.length === 1) {
          this.scaled = false;
          this.changeimg = true;
          this.touchStartY = e.changedTouches[0].clientY;
        }
        if (e.touches.length === 2) {
          this.scaled = true;
          this.changeimg = false;
        }
      },
      touchend(e) {
        if (e.touches.length === 0 && this.old.scale === 1 && this.changeimg) {
          const touch = this.touchStartY - e.changedTouches[0].clientY
          if (touch > 10) {
            this.loadimg()
          } else if (touch < -10) {
            this.backimg()
          }
        }
      },
    }
  };
</script>

<style scoped>
  .vertical-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    z-index: 1000;
  }

  .imgindex {
    position: fixed;
    top: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    border: 0 solid red;
    z-index: 1000;
  }

  .imgindex text {
    padding: 2px 5px;
    background-color: rgba(255, 255, 255, 0.7);
    color: rrgba(0, 0, 0, 0.7);
    border-radius: 10rpx;
  }

  .btn-vertical {
    position: fixed;
    top: 90%;
    left: 10%;
    width: 80%;
    display: flex;
    justify-content: space-around;
    border: 0 solid red;
    z-index: 1000;
  }

  .btn-transverse {
    position: fixed;
    height: 33%;
    left: 3%;
    top: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border: 0rpx solid red;
    z-index: 1000;
  }

  .marea {
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: hidden;
  }

  .mview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 100%;
  }

  .imgindex-transverse {
    position: fixed;
    height: 100%;
    right: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0rpx solid red;
    z-index: 1000;
    transform: rotate(90deg);
  }

  .imgindex-transverse text {
    padding: 2px 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 10rpx;
  }

  .inco-vertical {
    padding: 15rpx;
    height: 50rpx;
    width: 50rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 1.0);
  }

  .inco-transverse {
    padding: 15rpx;
    height: 50rpx;
    width: 50rpx;
    border-radius: 50%;
    transform: rotate(90deg);
    background-color: rgba(0, 0, 0, 0.5);
  }

  .transverse-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0);
    z-index: 100000;
  }

  .image-preview {
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .image-vertical {
    min-width: 100vw;
    max-height: 100%;
    width: 100vw;

  }

  .image-transverse {
    min-width: 100vh;
    max-height: 100%;
    height: 100vw;
    transform: rotate(90deg);

  }
</style>